<template>
  <div class="_wz_accidentDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
      </colgroup>
      <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">事故人员信息</td>
        </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="16%" />
        <col width="20%" />
        <col width="13%" />
        <col width="16%" />
        <col width="13%" />
        <col width="20%" />
      </colgroup>
      <tbody>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0">经营企业</td>
          <td colspan="2" style="border-top: 0">{{ formData.deptName ? formData.deptName : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">经营类型</td>
          <td colspan="2" style="border-top: 0px;">{{ formData.deptTransportName ? formData.deptTransportName : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">事故编号</td>
          <td style="border-top: 0px;">{{ formData.accidentFileNo ? formData.accidentFileNo : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">事故人员</td>
          <td style="border-top: 0px;">{{formData.accidentPersonName ? formData.accidentPersonName : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">人员性别
          </td>
          <td style="border-top: 0px;">{{formData.accidentPersonGender ? formData.accidentPersonGender : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">人员年龄</td>
          <td>{{ formData.accidentPersonAge ? formData.accidentPersonAge : "--" }}</td>

          <td style="text-align: right;font-weight: 600;">文化水平</td>
          <td>{{formData.accidentPersonEducation ? formData.accidentPersonEducation : "--" }}</td>
          <td style="text-align: right;font-weight: 600;">工作部门</td>
          <td>{{formData.accidentPersonDepartment ? formData.accidentPersonDepartment : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">人员工种</td>
          <td>{{!!formData.accidentPersonWorkType ? formData.accidentPersonWorkType : "--" }}</td>
          <td style="text-align: right;font-weight: 600;">入职日期</td>
          <td colspan="3">{{!!formData.accidentEmploymentDate ? formData.accidentEmploymentDate : "--" }}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">事故调查</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">事故日期</td>
          <td>{{!!formData.accidentOccurrenceDate ? formData.accidentOccurrenceDate : "--" }}</td>
          <td style="text-align: right;font-weight: 600;">事故位置</td>
          <td>{{!!formData.accidentOccurrencePlace ? formData.accidentOccurrencePlace : "--" }}</td>
          <td style="text-align: right;font-weight: 600;">受伤部位</td>
          <td>{{!!formData.accidentInjuredArea ? formData.accidentInjuredArea : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">持证情况</td>
          <td colspan="5">
            <div style="min-height: 60px;">{{formData.accidentCertificateSituation ? formData.accidentCertificateSituation : "--" }}</div>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">教育情况</td>
          <td colspan="5" style="border-top: 0px;">
            <div style="min-height: 60px;">{{formData.accidentSafetyEducation ? formData.accidentSafetyEducation : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">事故描述</td>
          <td colspan="5">
            <div style="min-height: 60px;">{{formData.accidentDescription ? formData.accidentDescription : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">事故性质</td>
          <td>
            <Tag type="dot" color="warning" v-if="formData.accidentNature == '未遂事故'">未遂事故</Tag>
            <Tag type="dot" color="#5ef1c9" v-else-if="formData.accidentNature == '轻度伤害'">轻度伤害</Tag>
            <Tag type="dot" color="#f60e6f" v-else-if="formData.accidentNature == '重度伤害'">重度伤害</Tag>
            <Tag type="dot" color="error" v-else-if="formData.accidentNature == '死亡事故'">死亡事故</Tag>
          </td>
          <td style="text-align: right;font-weight: 600;">当事人/目击者</td>
          <td>{{formData.accidentSignatureParty ? formData.accidentSignatureParty : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">
            确认时间
          </td>
          <td style="border-top: 0px;">{{formData.accidentSignatureDate ? formData.accidentSignatureDate : "--" }}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">事故分析</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">事故分析</td>
          <td colspan="5" style="font-weight: 600;">
            <div style="min-height: 60px;">{{formData.accidentCausesAnalysis ? formData.accidentCausesAnalysis : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">
            惩处意见
          </td>
          <td colspan="5" style="font-weight: 600;">
            <div style="min-height: 60px;">{{formData.accidentLiabilityOpinions ? formData.accidentLiabilityOpinions : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">责任人</td>
          <td colspan="2">{{formData.accidentSignatureMain ? formData.accidentSignatureMain : "--" }}</td>
          <td style="text-align: right;border-top: 0px;"> 次要责任人</td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentSignatureSecondary ? formData.accidentSignatureSecondary : "--" }}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">整改措施</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">防范措施</td>
          <td colspan="5">
            <div style="min-height: 60px;">{{formData.accidentPreventiveMeasures ? formData.accidentPreventiveMeasures : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">完成情况</td>
          <td colspan="5" style="border-top: 0px;">
            <div style="min-height: 60px;">{{formData.accidentPreventiveMeasuresDesc ? formData.accidentPreventiveMeasuresDesc : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">整改责任人</td>
          <td colspan="2">{{formData.accidentRectifySignaturePerson ? formData.accidentRectifySignaturePerson : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">整改时间</td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentRectifyDate ? formData.accidentRectifyDate : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">主管意见</td>
          <td colspan="5">
            <div style="min-height: 60px;">{{formData.accidentManagerOpinions ? formData.accidentManagerOpinions : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">主管领导</td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentManagerSignature ? formData.accidentManagerSignature : "--" }}</td>
          <td style="text-align: right;font-weight: 600;">确认时间</td>
          <td colspan="2">{{formData.accidentManagerSignatureDate ? formData.accidentManagerSignatureDate : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">安监意见</td>
          <td colspan="5" style="border-top: 0px;">
            <div style="min-height: 60px;">{{formData.accidentRegulatorsOpinions ? formData.accidentRegulatorsOpinions : "--" }}</div>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">安监部门</td>
          <td colspan="2">{{formData.accidentRegulatorsSignature ? formData.accidentRegulatorsSignature : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">确认时间</td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentRegulatorsSignatureDate ? formData.accidentRegulatorsSignatureDate : "--"}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">检验人</td>
          <td colspan="2">{{formData.accidentInspectSignaturePerson ? formData.accidentInspectSignaturePerson : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">确认时间</td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentInspectDate ? formData.accidentInspectDate : "--"}}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">事故认定</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">认定书编号</td>
          <td colspan="2">{{formData.accidentIndustrialInjuryNo ? formData.accidentIndustrialInjuryNo : "--"}}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">
            工伤鉴定等级
          </td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentIndustrialInjuryRate ? formData.accidentIndustrialInjuryRate : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">事故登记人</td>
          <td colspan="2">{{formData.accidentFileRecorder ? formData.accidentFileRecorder : "--" }}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">登记日期</td>
          <td colspan="2" style="border-top: 0px;">{{formData.accidentFileRecordDate ? formData.accidentFileRecordDate : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">事故报告记录</td>
          <td colspan="2">
            <span v-if="formData.accidentReportRecord" target="_blank" style="color: #1E9FFF;cursor: pointer" @click="fileClick(apiUrl.imgUrl + '/' + formData.accidentReportRecord)">查看文件</span>
            <span v-else target="_blank">暂无文件</span>
          </td>
          <td style="text-align: right;font-weight: 600;">事故分析记录</td>
          <td colspan="2">
            <span v-if="formData.accidentAnalysisRecord" target="_blank" style="color: #1E9FFF;cursor: pointer" @click="fileClick(apiUrl.imgUrl + '/' + formData.accidentAnalysisRecord)">查看文件</span>
            <span v-else target="_blank">暂无文件</span>
          </td>
        </tr>
      </tbody>
    </table>

    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>

import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'accidentDetails',//组件名称
  components: {},//组件引用
  props: ["selectData"],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      spinShow: false, //本页加载
      vehicleBrieflyData: null, //车辆简述
      formData: {},
    });


    const loadData = ()=>{
      //mounted 挂载结束状态
      state.spinShow = true;


      $axios.post(apiUrl.safetyAccountAccountAccidentInfo,{uuid: props.selectData.uuid}).then((res) => {
        state.spinShow = false;
        if (!!res) {
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }

    const fileClick = (e)=> {
      window.open(e);
    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      fileClick,
    }
  }
})

</script>
<style lang="less">
._wz_accidentDetails {
  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 10%;
      max-height: 90%;
      min-width: 10%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
